<template>
	<view>
		<view style="margin-top: 32upx;box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);padding: 40upx 38upx;background: #ffffff;">
			<view class="date-scroll">
				<scroll-view scroll-x="true">
					<view class="date-list">
						<view class="date-item" :class="key==selectedDate?'active':''" v-for="(date,key) in dates" :key="key" @click="chooseDate(key)">
							<view class="date-text">
								{{date.text}}
							</view>
							<view class="date-value">
								{{date.value}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="tab-row">
				<view class="tab" :class="selectedTab==0?'active':''" @click="switchTab(0)">
					<image :src="selectedTab==0?'/static/sunHL.png':'/static/sun.png'" mode="" class="tab-image"></image>
					<text>{{am}}-17:00</text>
				</view>
				<view class="tab" :class="selectedTab==1?'active':''" @click="switchTab(1)">
					<image :src="selectedTab==1?'/static/moonHL.png':'/static/moon.png'" mode="" class="tab-image"></image>
					<text>17:00-{{pm}}</text>
				</view>
			</view>
			<view class="time-list" v-show="selectedTab==0">
				<block v-for="(time,key) in times_am" :key="key">
					<view class="time-item" :class="key==selectedTime?'active':''" v-show="time.status" @click="chooseTime(key)">
						{{time.time}}
					</view>
					<view class="time-item disabled" v-show="!time.status">
						{{time.time}}
					</view>
				</block>
				
			</view>
			<view class="time-list" v-show="selectedTab==1">
				<block v-for="(time,key) in times_pm" :key="key">
					<view class="time-item" :class="key==selectedTime?'active':''" v-show="time.status" @click="chooseTime(key)">
						{{time.time}}
					</view>
					<view class="time-item disabled" v-show="!time.status">
						{{time.time}}
					</view>
				</block>
			</view>
		</view>
		<view style="height: 100upx;"></view>
		<view class="bottom" >
			<view class="bottom-btn" @click="showPreviewPage" :class="selectedTime>-1?'active':''">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad:function(e){
			this.store_id=e.store_id;
			this.staff_id=e.staff_id;
			this.service_id=e.service_id;
			this.pay_type=e.pay_type;
			this.card_item_id=e.card_item_id;
			this.getWorkTime();
		},
		
		data() {
			var weekdays=["周日","周一","周二","周三","周四","周五","周六"];
			var dates=[];
			for(var i=0;i<8;i++){
				var date=new Date();
				date.setTime(date.getTime()+24*60*60*1000*i);
				var month=(date.getMonth()+1)>9?date.getMonth()+1:"0"+(date.getMonth()+1);
				var day=date.getDate()>9?date.getDate():"0"+date.getDate();
				var week=date.getDay();
				dates.push({
					text:weekdays[week],
					value:month+"."+day,
					week:week,
				})
			}
			return {
				store_id:0,
				service_id:0,
				staff_id:0,
				dates:dates,
				selectedDate:0,
				selectedTime:-1,
				selectedTab:0,
				work_start:9,
				work_end:22,
				am:"09:00",
				pm:"22:00",
				times_am:[],
				times_pm:[],
				pay_type:0,
				card_item_id:0,
			};
		},
		methods:{
			showPreviewPage(){
				if(this.selectedTime==-1){
					return;
				}
				uni.navigateTo({
					url:"/pages/service/preview/preview?store_id="+this.store_id+"&staff_id="+this.staff_id
					+"&date="+this.dates[this.selectedDate].value
					+"&time="+(this.selectedTab==0?this.times_am[this.selectedTime].time:this.times_pm[this.selectedTime].time)
					+"&service_id="+this.service_id+"&pay_type="+this.pay_type+"&card_item_id="+this.card_item_id,
				})
			},
			switchTab:function(index){
				this.selectedTab=index;
				this.selectedTime=-1;
			},
			chooseDate:function(index){
				this.selectedDate=index;
				this.getWorkTime();
			},
			chooseTime:function(index){
				this.selectedTime=index;
			},
			caculateTime:function(){
				var am=[];
				var pm=[];
				var time=new Date();
				var current=time.getHours()+time.getMinutes()/60;
				if(current>17.5){
					this.selectedTab=1;
				}
				for(var i=this.work_start;i<=17;i+=0.5){
					if(i%1==0){
						if(i<current&&this.selectedDate==0){
							am.push({
								status:false,
								time:(i>9?i:"0"+i)+":00"
							})
						}else{
							am.push({
								status:true,
								time:(i>9?i:"0"+i)+":00"
							})
						}
					}else{
						if(i<current&&this.selectedDate==0){
							am.push({
								status:false,
								time:parseInt(i)>9?parseInt(i)+":30":"0"+(parseInt(i))+":30"
							});
						}else{
							am.push({
								status:true,
								time:parseInt(i)>9?parseInt(i)+":30":"0"+(parseInt(i))+":30"
							});
						}
						
					}
				}
				this.times_am=am;
				for(var i=17.5;i<=this.work_end;i+=0.5){
					if(i%1==0){
						if(i<current&&this.selectedDate==0){
							pm.push({
								status:false,
								time:i+":00"
							});
						}else{
							pm.push({
								status:true,
								time:i+":00"
							});
						}
					}else{
						if(i<current&&this.selectedDate==0){
							pm.push({
								status:false,
								time:parseInt(i)+":30"
							});
						}else{
							pm.push({
								status:true,
								time:parseInt(i)+":30"
							});
						}
					}
				}
				this.times_pm=pm;
			},
			getWorkTime:function(){
				uni.showLoading({
					title:"加载中",
				})
				var that=this;
				that.ajax("/store/worktime/",{
					store_id:this.store_id,
					weekday:this.dates[this.selectedDate].week,
					
				},function(res){
					that.work_start=res.data.data.work_start;
					that.work_end=res.data.data.work_end;
					that.am=res.data.data.am;
					that.pm=res.data.data.pm;
					that.caculateTime();
				});
			}
		}
	}
</script>

<style>
	.bottom{
		width: 100%;
		padding: 18upx;
		text-align: center;
		font-size: 28upx;
		background: #white;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		box-shadow:0upx 2upx 20upx 0upx rgba(71,142,126,0.15);
	}
	.bottom-btn{
		background: #E4E4E4;
		height: 84upx;
		margin: auto;
		font-size: 36upx;
		line-height: 84upx;
		color: #ffffff;
		border-radius:46upx;
		width: 460upx;
	}
	.bottom-btn.active{
		background: #45AA8C;
	}
	.time-list{
		background: #ffffff;
		padding: 15upx;
		display: flex;
		flex-wrap: wrap;
	}
	.time-item{
		width: 135upx;
		line-height: 48upx;
		font-size: 25upx;
		color: #4B4B4B;
		border: 1upx solid #ABABAB;
		border-radius: 24upx;
		margin:20upx 10upx;
		text-align: center;
	}
	.time-item.disabled{
		color: #b6b6b6;
		background: #f7f7f7;
		border: 1upx solid #e1e1e1;
	}
	.time-item.active{
		background: #EBBA80;
		color: #ffffff;
	}
	.tab-row{
		padding: 0 25upx;
		display: flex;
		flex-direction: row;
		background: #ffffff;
	}
	.tab{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #ABABAB;
		font-size: 30upx;
		padding: 40upx 0;
		border-bottom: 4upx solid #ffffff;
	}
	.tab-image{
		width: 56upx;
		height: 56upx;
	}
	.tab.active{
		color: #4B4B4B;
		border-bottom: 4upx solid #EBBA80;
	}
	.date-scroll{
		padding:5upx 25upx ;
		background: #ffffff;
	}
	.date-list{
		display: flex;
		flex-direction: row;
		align-content: center;
		color: #8B8B8B;
		font-size: 28upx;
	}
	.date-item{
		text-align: center;
		margin:5upx 40upx 5upx 0;
		padding: 14upx 8upx;
	}
	.date-item.active{
		color: #FF7465;
		font-size: 28upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
	}
</style>
